<template>
  <div class="changePwd">
    <div class="cp-title">
      <span class="sign"></span>
      <span>修改密码</span>
    </div>
    <div class="cp-content">
      <div class="cpc-line">
        <label for="originalPwd">*原始密码：</label>
        <input type="password" id="originalPwd" placeholder="请输入原始密码">
      </div>
      <div class="cpc-line">
        <label for="newPwd1">*新密码：</label>
        <input type="password" id="newPwd1" placeholder="请输入新密码">
      </div>
      <div class="cpc-line">
        <label for="newPwd2">*确认密码：</label>
        <input type="password" id="newPwd2" placeholder="请再次输入密码">
      </div>
      <div class="submitBtn" @click="submit">立即提交</div>
    </div>
  </div>
</template>
<script>
import $ from "jquery";
  export default {
    name: 'changePwd',
    data() {
      return {}
    },
    methods: {
      submit(){
        if($.trim($('#originalPwd').val())==''){
          this.$message.error('原始密码不能为空');
           return
        }
        if($.trim($('#newPwd1').val())==''){
          this.$message.error('新密码不能为空');
           return
        }
        if($.trim($('#newPwd2').val())==''){
          this.$message.error('新密码不能为空');
           return
        }
        if($.trim($('#newPwd1').val())!==$.trim($('#newPwd2').val())){
           this.$message.error('两次密码输入不一致');
           return
        }
        u.modifyPassword({
          password:$.trim($('#originalPwd').val()),
          newPassword:$('#newPwd1').val(),
        },data=>{
           if(data&&data.code==200){
             this.$message.success('密码修改成功');
           }else{
             this.$message.error('密码输入有误');
           }
        })
      }
    }
  }
</script>
<style lang="stylus" type='text/stylus' scoped>
  .changePwd
    width 100%
    height 100%
    background white
    .cp-title
      padding 0 20px
      height 50px
      line-height 50px
      font-size 16px
      color #282828
      border-bottom 1px solid #f4f5f6
      span
        vertical-align middle
      .sign
        display inline-block
        margin-right 10px
        background #ffb001
        width 5px
        height 18px
    .cp-content
      padding 34px 30px
      width 100%
      height calc(100% - 50px)
      overflow-y auto
      .cpc-line
        margin-bottom 36px
        height 40px
        label
          display inline-block
          width 135px
          font-size 14px
          color #3d3d3d
        input
          padding 0 14px
          width 340px
          height 40px
          font-size 14px
          color #747474
          outline none
          border-radius 3px
          border 1px solid #e6e9ed
          &:focus
            border-color #ffb001
          &::-webkit-input-placeholder
            color #cccccc
          &:-moz-placeholder
            color #cccccc
      .submitBtn
        display inline-block
        margin-top 14px
        margin-left 141px
        width 100px
        height 40px
        line-height 40px
        font-size 14px
        color white
        text-align center
        border-radius 2px
        background #ffb001
        cursor pointer
  //
</style>
